<template>
    <div class="flex-box">
        <heads title="粉丝"></heads>
        <div class="flex-item" style="display: flex;flex-direction: column;" >

            <scroller v-show="show"
                      :lockX=true
                      :scrollbar-y=false
                      :scrollbar-x=false
                      @on-pulldown-loading="pull_down()"
                      @on-pullup-loading="pull_up()"
                      :pulldown-config="{downContent: '加载更多', loadingContent:'正在加载',upContent:'释放更新',content:'....'}"
                      :pullup-config="{ downContent: '正在加载',loadingContent:'正在加载',upContent:'释放更新',content:'....'}"
                      :use-pulldown=true
                      :use-pullup=false
                      :bounce="bounce"
                      ref="scrollerBottom"
            >
                <div>

                    <panel :list="list" :type="type"></panel>
                    <divider v-show="show2">你还未关注任何人哟！</divider>
                </div>

            </scroller>

            <loading :show="show1" text=""></loading>

        </div>

    </div>
</template>

<script>
    import {Scroller,Panel,Loading,Divider} from  'vux'
    import heads from '../header';
    export default {
        name: "fans",
        components:{
            heads,
            Scroller,
            Panel,
            Loading,
            Divider
        },
        data(){
            return {
                show:true,
                bounce: true,
                type:'1',
                list: [],
                page:1,
                swiperHeight: 0 + 'px',
                pageCount:5,
                show1:false,
                show2:false
            }
        },
        mounted() {

        },
        methods:{
            pull_up() {
                this.show2=false;
                this.getActivity(1)
            },
            pull_down() {
                this.show2=false;
                this.getActivity(2)
            },
            getActivity(status=0) {
                if(status==0)
                    this.show1=true
                var info=[];
                var _this = this;
                this.$axios.get(this.$axios.defaults.baseURL+'fansList', {
                    params :{
                        page: this.page,
                        pageSize:this.pageCount
                    }
                }).then(function (res) {
                    _this.show1=false
                    for(var i=0;i<res.data.data.length;i++){
                        var box=[],url=[],meta=[];

                        box['id']=res.data.data[i].id;
                        box['src']=(res.data.data[i].user.thumb==null)?'static/images/head.png':res.data.data[i].user.thumb ;
                        box['title']=res.data.data[i].user.name;
                        box['desc']=res.data.data[i].user.introduce;
                        url['path']='/activity?id='+res.data.data[i].user_id;
                        url['replace']=false;
                        meta['date']='';
                        meta['other']='';
                        meta['source']='';
                        box['url']=url;
                        box['meta']=meta;
                        info[i]=box;
                    }

                    if(info.length==_this.pageCount){
                        _this.page=  _this.page+1;

                    }

                    for(var i=0;i<_this.list.length;i++){
                        for(var j=0;j<info.length;j++){
                            if(_this.list[i].id ==info[j].id){
                                info.splice(j,1)
                            }
                        }
                    }

                    if (status == 1) {
                        setTimeout(() => {
                            _this.list=_this.list.concat(info)
                            _this.$refs.scrollerBottom.donePullup();
                            if(_this.list.length==0){
                                _this.show2=true;
                            }

                        }, 1000)
                    }

                    else if (status == 2) {
                        setTimeout(() => {

                            _this.list= info.concat(_this.list)
                            _this.$refs.scrollerBottom.donePulldown();
                            if(_this.list.length==0){
                                _this.show2=true;
                            }

                        }, 1000)

                    } else {
                        _this.show = true;
                        _this.list=_this.list.concat(info)
                        if(_this.list.length==0){
                            _this.show2=true;
                        }
                    }


                }).catch(function (err) {
                    _this.show1=false
                    console.log(err)
                })

            },
        },
        created(){
            this.getActivity();
        },
        activated(){
            this.show2=false;
            this.getActivity();
        }
    }
</script>

<style lang="less" scoped>
    @import "../../assets/css/comm";
</style>